<template>
  <div>
   <input v-focus type="text" placeholder="请输入内容">
   <!-- 需求:给指令传入一个颜色，让标签设置文字颜色  -->
   <div v-color="color">
    住在山里针不戳! 针不戳
   </div>
   <!-- 需求升级:点击按钮修改颜色  -->
   <button @click="color='red'">点我变色</button>
  </div>
</template>

<script>
  //自定义指令的好处 :
  // 1.避免我们频繁操作 DOM
  // 2.便于复用
  //传统做法，会操作DOM
  // window.onload = function(){
  //     //获取input
  //     //获取焦点
  // }
export default {
   directives:{
     focus:{
      inserted(el){
        el.focus()
      }
     },
     color:{
      //面试题：自定义指令你用过哪些钩子？
      // 这些自动执行的函数，还有一个爱称:钩子函数 
      // 这个函数会在元素挂载到页面时自动执行 
      // inserted 有俩个参数:
      // 参数1:原生DOM有对象 
      // 参数2:指令相关的所有参数  是个对象 可以解构
      inserted(el,binding){
        console.log('绑定的元素加载了',el,binding.value);
        el.style.color=binding.value
      },
      // 这个函数会在指令的值发生变化时自动执行 
      // 同样也会提供俩个参数，和 inserted 一模一样 
      update(el,{value}){ //对象的解构,参数也能解
        el.style.color=value
      }
     }
   },
    data(){
      return {
      color:'yellowgreen'
      }
    },
    methods:{
     
       
      },
   

   
    
    }

</script>

<style >

</style>